<template>
  <div class="uservacation">
    <div class="cart" >   
                <i class="el-icon-bangzhu"></i>
                <span>人员变动</span>
            </div>
      <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="按区域筛选">
            <el-select size="small"  @change="areaselected(formInline.area_name)" v-model="formInline.area_name" placeholder="按区域筛选">
            <el-option 
            v-for="(item,index) in areacho"
            :key="item+index"
            :value="item.area"
            >{{item.area}}</el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="按项目筛选">
            <el-select size="small"  @change="departmentselected(formInline.project_name)" v-model="formInline.project_name" placeholder="按项目筛选">
            <el-option 
            v-for="(item,index) in selection"
            :key="item+index"
            :value="item"
            >{{item}}</el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="small" @click="choose">筛选</el-button>
            <el-button type="primary" size="small" @click="kaka">全部</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="id" label="序号" header-align="center" align="center"></el-table-column>
      <el-table-column prop="name" label="姓名" header-align="center" align="center"></el-table-column>
      <el-table-column prop="area" label="区域" header-align="center" align="center"></el-table-column>
      <el-table-column prop="project" label="项目" header-align="center" align="center"></el-table-column>
      <el-table-column prop="department" label="部门" header-align="center" align="center"></el-table-column>
      <el-table-column prop="position" label="职位" header-align="center" align="center"></el-table-column>
      <el-table-column prop="job_level" label="职级" header-align="center" align="center"></el-table-column>
      <el-table-column prop="date_on_board" label="加入公司时间" header-align="center" align="center"></el-table-column>
      <el-table-column prop="now_status" label="当前状态" header-align="center" align="center"></el-table-column>
      <el-table-column prop="date_of_appointment" label="担任本职务日期" header-align="center" align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" width="230" header-align="center" align="center">
        <template slot-scope="scope">
          <el-button type="success" size="samll" @click="changecontract(scope.row)" >人事变动</el-button>
          <el-button type="danger" size="samll" @click="leavego(scope.row)" >离职</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pagesize"
      layout=" prev, pager, next,jumper"
      :total="totalCount">
    </el-pagination>

    <el-dialog title="人事变动" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="原区域" prop="before_area">
        <el-input v-model="ruleForm.before_area" disabled></el-input>
      </el-form-item>
      <el-form-item label="原项目" prop="before_project">
        <el-input v-model="ruleForm.before_project" disabled></el-input>
      </el-form-item>
      <el-form-item label="原部门" prop="before_department">
        <el-input v-model="ruleForm.before_department" disabled></el-input>
      </el-form-item>
      <el-form-item label="原职位" prop="before_position">
        <el-input v-model="ruleForm.before_position" disabled></el-input>
      </el-form-item>
      <el-form-item label="原职级" prop="before_job_level">
        <el-input v-model="ruleForm.before_job_level" disabled></el-input>
      </el-form-item>
      <el-form-item label="调动时间" required>
          <el-col :span="11">
            <el-form-item prop="change_time">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                @change="gettime"
                v-model="ruleForm.change_time"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
      <el-form-item label="当前所在区域" prop="now_area">
          <el-select v-model="ruleForm.now_area" placeholder="请选择活动区域">
            <el-option v-for="(item,index) in areacho" :key="item+index" :label="item.area" :value="item.area"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="当前所在项目" prop="now_project">
        <el-input v-model="ruleForm.now_project"></el-input>
      </el-form-item>
      <el-form-item label="当前所在部门" prop="now_department">
        <el-input v-model="ruleForm.now_department"></el-input>
      </el-form-item>
      <el-form-item label="当前所在职位" prop="now_position">
        <el-input v-model="ruleForm.now_position"></el-input>
      </el-form-item>
      <el-form-item label="现职级" prop="now_job_level">
        <el-input v-model="ruleForm.now_job_level"></el-input>
      </el-form-item>
      <el-form-item label="当前状态" prop="now_status">
         <el-select v-model="ruleForm.now_status" placeholder="请选择活动区域">
            <el-option label="正式员工" value="正式员工"></el-option>
            <el-option label="试用期" value="试用期"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="调动明细" prop="change_detail">
        <el-input v-model="ruleForm.change_detail"></el-input>
      </el-form-item>
    </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm(ruleForm)">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="离职操作" :visible.sync="dialogVisible">
      <el-form :model="ruleForm1"  ref="ruleForm1" label-width="100px" class="demo-ruleForm">
      <el-form-item label="离职类型" prop="remove_office_type">
        <el-select v-model="ruleForm1.remove_office_type" placeholder="请选择活动区域">
          <el-option label="辞职" value="辞职"></el-option>
          <el-option label="辞退" value="辞退"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="离职时间">
          <el-col :span="11">
            <el-form-item prop="remove_office_date">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                @change="gettime"
                v-model="ruleForm1.remove_office_date"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
      <el-form-item label="离职明细" prop="remove_office_detail">
        <el-input v-model="ruleForm1.remove_office_detail"></el-input>
      </el-form-item>
    </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="leavejob(ruleForm1)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Qs from 'qs'
import axios from 'axios'
import {get ,post } from '../../utils/axios.tool'
export default {
  data() {
    return {
      tableData: [
        {
          // ban:false,
          id: '1',
          name: "1",
          area: "1",
          project: "1",
          department: "1",
          position: "1",
          job_level: "1",
          date_on_board: "2019-11-01",
          now_status: "",
          date_of_appointment: "",
        }
      ],
       formInline: {
          area_name: '',
          project_name: '',
          filter_parameter: "",
      },
      pagesize:10,
      currentPage:1,
      totalCount:1,
      areacho:[],
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogVisible:false,
      ruleForm: {
        before_area : '',
        before_project: "",
        before_department: "",
        before_position: "",
        before_job_level: "",
        change_time: "",
        now_area: "",
        now_project: "",
        now_department: "",
        now_position: "",
        now_job_level: "",
        now_status:"",
        change_detail: "",
      },
      ruleForm1:{
        remove_office_type:'',
        remove_office_date:'',
        remove_office_detail:'',
      }
    }
  },
  methods: {
    gettime(val){
    },
    changecontract(row){
      this.dialogFormVisible = true;
      this.ruleForm.before_area = row.area
      this.ruleForm.before_project = row.project
      this.ruleForm.before_department = row.department
      this.ruleForm.before_position = row.position
      this.ruleForm.before_job_level = row.job_level
      this.usersid = Number(row.id);
    },
    submitForm(formName) {
      let id = this.usersid;
      let url = `/usermanage/personnel/${id}/`
      Qs.stringify(this.ruleForm)
      let sessionId = localStorage.getItem("sessionId");
      let Authorization =  `JWT ${sessionId}`;
      axios.put(url,Qs.parse(this.ruleForm),{headers:{
          'Authorization':Authorization
        }
      }).then(res=>{
        this.dialogFormVisible = false;
        this.$message("修改成功");
        this.getData()
      })    
    },
    leavego(row){
      this.dialogVisible = true
      this.usersid = Number(row.id);
    },
    leavejob(formName){
      let id = this.usersid;
      let url = `/usermanage/now_status/${id}/`
      Qs.stringify(this.ruleForm1)
      let sessionId = localStorage.getItem("sessionId");
      let Authorization =  `JWT ${sessionId}`;
      axios.put(url,Qs.parse(this.ruleForm1),{headers:{
          'Authorization':Authorization
        }
      }).then(res=>{
         this.dialogVisible = false
        this.$message("修改成功");
        this.getData()
      }) 
    },
    handleCurrentChange(val){
      this.currentPage = val
      let page_size = this.pagesize
      let page = this.currentPage
      let url = `/usermanage/personnel/?page=${page}&page_size=${page_size}`;
      this.$axios.get(url,this.formInline).then(res => {
        this.tableData = res.results;
        this.totalCount = res.count
      });
    },
    getData(){
      let page_size = this.pagesize
      let page = this.currentPage
      let url = `/usermanage/personnel/?page=${page}&page_size=${page_size}`;
      this.$axios.get(url).then(res => {
        this.tableData = res.results;
        this.totalCount = res.count
      });
    },
    areaselected(val){
      this.formInline.area_name = val
      this.formInline.project_name = ''
    },
    departmentselected(val){
      this.formInline.project_name = val
    },
    kaka(){
      this.formInline.area_name = ''
      this.formInline.project_name = ''
      this.getData()
    },
    choose(){
      let page_size = this.pagesize
      this.currentPage = 1
      let page = this.currentPage
      let url = `/usermanage/personnel/?page=${page}&page_size=${page_size}`;
      this.$axios.get(url,this.formInline).then(res => {
        this.tableData = res.results;
        this.totalCount = res.count
      });
    },
    areachoose(){
      let url='/usermanage/area/'
      this.$axios.get(url).then(res=>{
        this.areacho = res.data
      })
    }
  },
  mounted(){
    this.getData()
    this.areachoose()
  },
  computed : {
        selection :function(){
            for(var i = 0; i < this.areacho.length; i++){
                if(this.areacho[i].area == this.formInline.area_name){
                    return this.areacho[i].project;
                }
            }
        },
   }
}

</script>

<style lang="less">
.uservacation {
  .cart{
            width: 20%;
            margin-bottom: 30px;
            i{
                font-size: 20px;
                margin-right: 8px;
                color: gray;
            }
            span{
                font-size: 15px;
                color: gray;
                font-weight: bold;
            }
        }
  .el-input--mini .el-input__inner {
    width: 40%;
    margin-bottom: 22px;
  }
  .el-input--mini{
    display: inline;
    margin-right: 80px;
  }
  .el-pagination{
    display: flex;
    justify-content: center;
  }
  .el-button--small, .el-button--small.is-round{
    margin-right: 30px;
  }
}
</style>